<!--suppress ALL -->
<script lang="ts">
export default {
  name: "RepositoryVersionEntityTable"
}
</script>

<template>
  <!-- 数据表单 -->
  <el-table
    ref="dataTableRef"
    v-loading="false"
    :data="dataState.entityList"
    border
    highlight-current-row
    @row-click="handleRowClick"
  >
    <!-- 展开列表 -->
    <el-table-column type="expand">
      <template #default="props">
        <el-input v-model="props.row.extendParam.description" :autosize="{ minRows: 3, maxRows: 100 }" :readonly="true"
                  type="textarea"/>
      </template>
    </el-table-column>

    <!-- 列表 -->
    <el-table-column label="模板名称" min-width="150" prop="modelName"/>
    <el-table-column :formatter="formatDate4elTableColumn" label="更新日期" prop="updateTime" width="180"/>


    <!-- 上传对话框/下载对话框 -->
    <el-table-column align="center" label="操作" width="200">
      <template #default="scope">
        <el-button :icon="ArrowRight" circle plain type="primary" @click.stop="handleDetailPage(scope.row)"/>
      </template>
    </el-table-column>

  </el-table>

</template>

<script lang="ts" setup>
import {onMounted, reactive, toRefs} from "vue";
import {useRouter} from "vue-router";

import {
  RepoCompObjectEntity,
  RepoCompVersionEntity,
  RepoCompVersionQueryParam,
} from "@/api/repo/comp/cloud/model/version/types";
import {
  listRepoCompObjectEntityList,
  listRepoCompVersionEntityList,
} from "@/api/repo/comp/cloud/model/version";
import {ArrowRight, Edit, Delete} from '@element-plus/icons-vue';
import {formatDate4elTableColumn, formatDate4elTableColumn2} from '@/utils/formatter';
import {formatFileSize4elTableColumn, formatFileSize4elTableColumn2} from '@/utils/fileutil';

const emit = defineEmits(['rowClick', 'update', 'delete', 'deleteVersion', 'download', 'install']);// 定义组件的事件通知
const router = useRouter();

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({refreshTable, getEntities, getSelects});

// 数据状态：定义
let dataState = reactive({
  // 页面转载状态
  loading: false,
  // 选中ID数组
  selects: [],
  // 记录总数
  total: 0,
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 父节点的ID
  versionId: '',
  // 实体数据
  entityList: [] as RepoCompObjectEntity[],
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as RepoCompVersionQueryParam,
});

/**
 * 捕获列表中的选择变化
 * @taskParam selection
 */
function handleSelectionChange(selection: any) {
  dataState.selects = selection.map((item: any) => item);
  dataState.single = selection.length !== 1;
  dataState.multiple = !selection.length;
}

/**
 * 捕获列表中的行选择
 * @taskParam row
 */
function handleRowClick(row: any) {
  emit('rowClick', row);
}

/**
 * 捕获下载按钮
 * @taskParam row 行信息
 */
function handleDownloadPackage(row: any) {
  emit('download', 'table', 'download', row);
}

function handleInstallPackageDialog(row: any) {
  if (row.status < 2) {
    return;
  }

  emit('install', 'table', 'install', row);
}

function handleDeletePackageDialog(row: any) {
  if (row.status < 2) {
    return;
  }

  emit('delete', 'table', 'delete', row);
}

function handleDetailPage(row: any) {
  router.push('/repo-comp/cloud/jsn-decoder/version-info?versionId=' + row.versionId + '&objectId=' + row.objectId);
}

/**
 * 刷新表单
 */
function refreshTable(queryParams: RepoCompVersionQueryParam) {
  dataState.queryParams = queryParams;

  handleQuery();
}

/**
 * 刷新页面信息
 */
function handleQuery() {
  dataState.queryParams.versionId = dataState.versionId;
  listRepoCompObjectEntityList(dataState.queryParams).then(({data}) => {
    dataState.entityList = data;
  });
}

/**
 * 获得选中的ID
 */
function getSelects(): any {
  return dataState.selects;
}

/**
 * 获得实体信息
 */
function getEntities(): any {
  return dataState.entityList;
}

function getUuidFromHref() {
  let tag = "/repo-comp/cloud/jsn-decoder/object-list?versionId=";
  let start = location.href.indexOf(tag);
  if (start > 0) {
    return location.href.substring(start + tag.length);
  }

  return '';
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
  dataState.versionId = getUuidFromHref();

  // 查询实体数据
  handleQuery();
});

</script>
